<template>
    <div>
        <Example title="基本用法">
            <a-breadcrumb>
                <a-breadcrumb-item><a href="">
                    <a-icon type="home" />
                </a></a-breadcrumb-item>
                <a-breadcrumb-item>
                    <a href=""><a-icon type="user" />User</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>index</a-breadcrumb-item>
            </a-breadcrumb>
        </Example>

        <Example title="自定义分割线">
            <a-space direction="vertical">
                <a-breadcrumb separator=">">
                    <a-breadcrumb-item><a href="">Home</a></a-breadcrumb-item>
                    <a-breadcrumb-item><a href="">User</a></a-breadcrumb-item>
                    <a-breadcrumb-item>index</a-breadcrumb-item>
                </a-breadcrumb>
                <a-breadcrumb>
                    <template slot="separator">💕</template>
                    <a-breadcrumb-item><a href="">Home</a></a-breadcrumb-item>
                    <a-breadcrumb-item><a href="">User</a></a-breadcrumb-item>
                    <a-breadcrumb-item>index</a-breadcrumb-item>
                </a-breadcrumb>
                <a-breadcrumb separator="">
                    <a-breadcrumb-item><a href="">Home</a></a-breadcrumb-item>
                    <a-breadcrumb-separator>:</a-breadcrumb-separator>
                    <a-breadcrumb-item><a href="">User</a></a-breadcrumb-item>
                    <a-breadcrumb-separator>/</a-breadcrumb-separator>
                    <a-breadcrumb-item>index</a-breadcrumb-item>
                </a-breadcrumb>
            </a-space>
        </Example>

        <Example title="下拉菜单">
            <a-breadcrumb>
                <a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
                <a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item>
                <a-breadcrumb-item>
                    <a href="">General</a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                        <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                            支付宝
                        </a>
                        </a-menu-item>
                        <a-menu-item>
                        <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                            淘宝
                        </a>
                        </a-menu-item>
                        <a-menu-item>
                        <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                            天猫
                        </a>
                        </a-menu-item>
                    </a-menu>
                </a-breadcrumb-item>
                <a-breadcrumb-item>Button</a-breadcrumb-item>
            </a-breadcrumb>
        </Example>

        <Example title="router">
            <a-breadcrumb :routes="routes">
                <template slot="itemRender" slot-scope="{ route, routes, paths }">
                    <span v-if="routes.indexOf(route) === routes.length - 1">
                        {{ route.breadcrumbName }}
                    </span>
                    <router-link v-else :to="`/${paths.join('/')}`">
                        {{ route.breadcrumbName }}
                    </router-link>
                </template>
            </a-breadcrumb>
        </Example>
    </div>
</template>

<script>

export default {
    data() {
        return {
            routes: [
                { path: 'index', breadcrumbName: 'home',},
                { path: 'first', breadcrumbName: 'first',
                children: [
                    {
                    path: '/general',
                    breadcrumbName: 'General',
                    },
                    {
                    path: '/layout',
                    breadcrumbName: 'Layout',
                    },
                    {
                    path: '/navigation',
                    breadcrumbName: 'Navigation',
                    },
                ],
                },
                { path: 'second', breadcrumbName: 'second' },
            ]
        }
    }
}
</script>

<style>

</style>
